<template>
	<view>
		<ttBar leftIcon="icon-back" title="退款/售后"></ttBar>
		<scroll-view scroll-y="true" class="" :style="{'height':scHeight+'px'}" @scrolltolower="pushData">
			<view class="orderList" v-if="orderData.length>0">
				<block v-for="(item,index) in orderData" :key="index">
					<refoundItem :orderItem="item"></refoundItem>
				</block>
			</view>
			<emptyBox v-if="orderData.length<1" type="order"></emptyBox>
		</scroll-view>
		
	
	</view>
</template>

<script>
	import refoundItem from "@/pagesA/components/refoundItem/refoundItem.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			emptyBox,
			refoundItem
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
			})
			
		},
		data() {
			return {
				orderShow:100,
				statusArr:['全部','待付款','','','待体验','待开课','退款中','已退款','已关闭','已完成'],
				isPayment:true,
				scHeight:uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-(uni.upx2px(90)),
				orderData:[],
				hasNext:false,
				nextPage:1,
				tongji:[]
			};
		},
		methods:{
			getData(data){
				this.$store.dispatch("apiGetOrderList",data)
				.then(res=>{
					
					this.orderData=res.data.data.items
					this.hasNext=res.data.data.hasNext,
					this.nextPage=res.data.data.nextPage
				})
			},
			toggleSc(e){
				let _status=e.currentTarget.dataset.type
				this.orderShow=parseInt(e.currentTarget.dataset.type);
				this.getData({
					userId:this.userInfo.userId,
					status:this.orderShow,
					page_no:1,
					page_size:10
				})
			},
			pushData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetOrderList",{
						userId:this.userInfo.userId,
						status:this.orderShow,
						page_no:this.nextPage,
						page_size:10
					})
					.then(res=>{
						
						this.orderData=this.orderData.concat(res.data.data.items)
						this.hasNext=res.data.data.hasNext
						this.nextPage=res.data.data.nextPage
					})
					
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
			}
		},
		onLoad(cfm) {
			let _this=this;
			if(cfm.status){
				this.orderShow=parseInt(cfm.status) 
			}
			_this.getData({
				userId:this.userInfo.userId,
				status:this.orderShow,
				page_no:1,
				page_size:10
			});
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData({
					userId:this.userInfo.userId,
					status:this.orderShow,
					page_no:1,
					page_size:10
				});
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.tabBar {
		height: 90upx;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		background-color: #FFFFFF;
		box-sizing: border-box;
		display: flex;
		.tabList {
			display: flex;
			// padding: 0 35upx;
			// margin-right: 50upx;
			.tabItem {
				flex-shrink: 0;
				line-height: 85upx;
				font-size: 30rpx;
				color: #202932;
				
				width: 25%;
				text-align: center;
			}

			.active {
				color: #f79f21;
				border-bottom: 3upx solid #ffb423;
			}
		}
	}

	.paymentBox {
		display: flex;
		background-color: #FFFFFF;
		height: 90upx;
		padding: 0 38upx;
		align-items: center;
		.paymentItem {
			font-size: 26rpx;
			color: #8f8f8f;
			background-color: #e7e7e7;
			border-radius: 7rpx;
			padding: 10upx 20upx;
			margin-right: 16upx;
		}
		.active{
			background-color: #8f8bad;
			color: #FFFFFF;
		}
	}
	.remarkInput{
		border: 1px solid #cacaca;
		font-size: 24upx;
		margin-top: 20upx;
		height: 60upx;
		padding: 0 15upx;
	}
	.orderList{
		display: flex;
		flex-direction: column;
		padding: 18upx;
	}
</style>
